import Vue from 'vue'

export default Vue.extend({
  name: 'ResizeMixin',
  data() {
    return {
      chart: null,
      sidebarElm: undefined
    }
  },
  mounted() {
    this.initResizeEvent()
    this.initSidebarResizeEvent()
  },
  beforeDestroy() {
    this.destroyResizeEvent()
    this.destroySidebarResizeEvent()
  },
  activated() {
    this.initResizeEvent()
    this.initSidebarResizeEvent()
  },
  deactivated() {
    this.destroyResizeEvent()
    this.destroySidebarResizeEvent()
  },
  methods: {
    chartResizeHandler() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.chartResizeHandler()
      }
    },
    initResizeEvent() {
      if (this.chartResizeHandler) {
        window.addEventListener('resize', this.chartResizeHandler)
      }
    },
    destroyResizeEvent() {
      if (this.chartResizeHandler) {
        window.removeEventListener('resize', this.chartResizeHandler)
      }
    },
    initSidebarResizeEvent() {
      this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      if (this.sidebarElm) {
        this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
      }
    },
    destroySidebarResizeEvent() {
      if (this.sidebarElm) {
        this.sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler)
      }
    }
  }
})
